import QtQuick 1.0

MyPage {
    id: rosterPage
    objectName: "rosterPage"

    property string selectedJid: ""

    function statConnection() {
        console.log( "QML: statConnection()" )
        connectingRect.opacity = 0.3

        topPanelStatConn.text = "Connecting..."
        topPanelStatConn.img = "qrc:/qml/images/presence-online.png"
        topPanelStatConn.showPanel()
        topPanelStatConn.pauseHide = 10
    }

    function statConnected() {
        console.log("QML: statConnected()")
        connectingRect.opacity = 0
        topPanelStatConn.hidePanel()
    }

    function statDisonnected() {
        console.log("QML: statDisonnected()")
        connectingRect.opacity = 0

        topPanelStatConn.hidePanel()
        topPanelStatConn.text = "Offline"
        topPanelStatConn.img = "qrc:/qml/images/presence-offline.png"
        topPanelStatConn.showPanel()
        topPanelStatConn.pauseHide = 1500
        topPanelStatConn.hidePanel()
    }


    /*******************************************************************************/

    Component.onCompleted: {
        var status = cppMyXmppClient.__getStatus()
        //console.log( "QML: cppMeegIMStatus: "+ status )

        dlgMyStatus.setStatus( status, "" )

        if( (status == "online") || (status == "chat") ) {
            toolBarButtonPresence.icon = "qrc:/qml/images/bar_presence_online.png"
        } else if( (status == "away") || (status == "XA") ) {
            toolBarButtonPresence.icon = "qrc:/qml/images/bar_presence_away.png"
        } else if(  status == "DND"  ) {
            toolBarButtonPresence.icon = "qrc:/qml/images/bar_presence_busy.png"
        } else if(  status == "offline"  ) {
            toolBarButtonPresence.icon = "qrc:/qml/images/bar_presence_offline.png"
        }
    }
    /*******************************************************************************/

    colorPage: "white"

    Component {
        id: componentRosterItem
        HorizontalGradient {
            id: wrapper
            clip: true
            width: listViewRoster.width
            height: 90
            //border.color: "blue"

            Image {
                id: imgPresence
                source: contactPicStatus
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 7

            }

            HorizontalGradient {
                z: 1
                id: wrapperTxtJid
                anchors.left: imgPresence.right
                anchors.leftMargin: 5
                anchors.top: parent.top
                anchors.topMargin: 1
                height: parent.height/2 - 2
                width: parent.width - (imgPresence.width + imgPresence.anchors.leftMargin) - (imgAvatar.width + imgAvatar.anchors.rightMargin) - 5
                gradient: Gradient {
                    GradientStop{ color: "transparent"; position: 0 }
                    GradientStop{ color: "transparent"; position: 0.8 }
                    GradientStop{ color: "white"; position: 0.95 }
                    GradientStop{ color: "white"; position: 1 }
                }
            }
            Item {
                anchors.verticalCenter: wrapperTxtJid.verticalCenter
                anchors.left: wrapperTxtJid.left
                height: wrapperTxtJid.height
                width: wrapperTxtJid.width
                clip: true
                Text {
                    id: txtJid
                    clip: true
                    //text: (contactName === "" ? contactJid : contactName) + (contactResource !== "" ? "/" + contactResource : "")
                    text: (contactName === "" ? contactJid : contactName)
                    font.pixelSize: 26
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                }
            }

            HorizontalGradient {
                z: 1
                id: wrapperTxtStatus
                anchors.left: imgPresence.right
                anchors.leftMargin: 5
                anchors.top: wrapperTxtJid.bottom
                anchors.topMargin: 1
                height: parent.height/2 - 2
                width: parent.width - (imgPresence.width + imgPresence.anchors.leftMargin) - (imgAvatar.width + imgAvatar.anchors.rightMargin) - 5
                gradient: Gradient {
                    GradientStop{ color: "transparent"; position: 0 }
                    GradientStop{ color: "transparent"; position: 0.8 }
                    GradientStop{ color: "white"; position: 0.95 }
                    GradientStop{ color: "white"; position: 1 }
                }
            }
            Item {
                anchors.verticalCenter: wrapperTxtStatus.verticalCenter
                anchors.left: wrapperTxtStatus.left
                height: wrapperTxtStatus.height
                width: wrapperTxtStatus.width
                clip: true
                Text {
                    id: txtStatus
                    text: contactTextStatus
                    font.pixelSize: 22
                    color: "gray"
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                }
            }

            Image {
                id: imgAvatar
                smooth: true
                height: 80
                width: 80
                anchors.right: parent.right
                anchors.rightMargin: 5
                anchors.verticalCenter: parent.verticalCenter
                source: contactPicAvatar === "" ? "qrc:/qml/images/avatar.png" : contactPicAvatar
                Image {
                    anchors.centerIn: parent
                    source: "qrc:/qml/images/meego_frame_80.png"
                }
            }

            gradient: Gradient {
                GradientStop{ id: posGr1; color: "transparent"; position: 0 }
                GradientStop{ id: posGr2; color: "transparent"; position: 0 }
                GradientStop{ id: posGr3; color: "transparent"; position: 0 }
                GradientStop{ id: posGr4; color: "transparent"; position: 1 }
            }


            states: State {
                name: "Current"
                when: (wrapper.ListView.isCurrentItem && (main.chatJid != "") )
                PropertyChanges { target: posGr1; position: 0 }
                PropertyChanges { target: posGr1; color: "lightblue" }
                PropertyChanges { target: posGr2; position: 0.2 }
                PropertyChanges { target: posGr2; color: "lightblue" }
                PropertyChanges { target: posGr3; position: 0.6 }
                PropertyChanges { target: imgPresence; anchors.leftMargin: 15 }
            }

            transitions: Transition {
                NumberAnimation { properties: "position"; duration: 300 }
                NumberAnimation { properties: "anchors.leftMargin"; duration: 300 }
            }

            MouseArea {
                id: mouseAreaItem;
                anchors.fill: parent

                onClicked: {
                    wrapper.ListView.view.currentIndex = index
                    main.chatJid = contactJid
                    main.chatAvatar = contactPicAvatar
                }

                onDoubleClicked: {
                    wrapper.ListView.view.currentIndex = index
                    main.chatJid = contactJid
                    main.chatAvatar = contactPicAvatar
                    cppMyXmppClient.openChat( contactJid )
                    rosterPage.closePage( "qrc:/qml/MessagesPage.qml" )
                }

                onPressAndHold: {
                    wrapper.ListView.view.currentIndex = index
                    main.chatJid = contactJid
                    main.chatAvatar = contactPicAvatar
                }
            }
        } //Rectangle
    }



    ListView {
        id: listViewRoster
        anchors.top: parent.top
        anchors.bottom: toolBar.top
        anchors.left: parent.left
        anchors.right: parent.right
        clip: true
        delegate: componentRosterItem
        model: cppRoster
        section {
            property: "contactGroup"
            criteria: ViewSection.FullString
            delegate: Rectangle {
                color: "lightgray"
                width: parent.width
                height: 40
                Text {
                    //anchors.verticalCenter: parent.verticalCenter
                    anchors.centerIn: parent
                    text: section
                    font.pixelSize: 28
                }
            }
        }
    }


    /********************************( dlgMyStatus )************************************/

    DialogMyStatus {
        id: dlgMyStatus
        onMyStatusChange: {
            cppMyXmppClient.setMyPresence( dlgMyStatus.myStatusSet, dlgMyStatus.myTextStatus )
            if( (dlgMyStatus.myStatusSet == "online") || (dlgMyStatus.myStatusSet == "chat") )
            {
                toolBarButtonPresence.icon = "qrc:/qml/images/bar_presence_online.png"
            }
            else if( (dlgMyStatus.myStatusSet == "away") || (dlgMyStatus.myStatusSet == "XA") )
            {
                toolBarButtonPresence.icon = "qrc:/qml/images/bar_presence_away.png"
            }
            else if( (dlgMyStatus.myStatusSet == "DND") )
            {
                toolBarButtonPresence.icon = "qrc:/qml/images/bar_presence_busy.png"
            }
            else if( (dlgMyStatus.myStatusSet == "offline") )
            {
                toolBarButtonPresence.icon = "qrc:/qml/images/bar_presence_offline.png"
            }
        }
    }

    /*******/

    DialogOptionsRoster {
        id: dlgRosterOptions
        onItemClicked: {
            if( dlgRosterOptions.itemSelected == "accounts" ) {
                rosterPage.closePage( "qrc:/qml/AccountsPage.qml" )
            }
        }
    }

    /********************************( Toolbar )************************************/

    ToolBar {
        id: toolBar
        ToolButton {
            id: toolBarButtonPresence
            icon: "qrc:/qml/images/bar_presence_offline.png"
            anchors.left: parent.left
            anchors.leftMargin: (0.5*(parent.width/4) - 0.5*toolBarButtonPresence.width)
            onClicked: {
                if( dlgRosterOptions.state == "visible" ) {
                    dlgRosterOptions.dlgShowHide()
                }
                dlgMyStatus.dlgShowHide()
            }
            pauseAnim: 500
        }
        ToolButton {
            id: toolBarButtonOptions
            icon: "qrc:/qml/images/bar_options.png"
            anchors.left: parent.left
            anchors.leftMargin: (1.5*(parent.width/4) - 0.5*toolBarButtonOptions.width)
            onClicked: {
                if( dlgMyStatus.state == "visible" ) {
                    dlgMyStatus.dlgShowHide()
                }
                dlgRosterOptions.dlgShowHide()
            }
            pauseAnim: 600
        }
        ToolButton {
            id: toolBarButtonChats
            icon: "qrc:/qml/images/bar_open_chats.png"
            anchors.left: parent.left
            anchors.leftMargin: (2.5*(parent.width/4) - 0.5*toolBarButtonChats.width)
            onClicked: {
                rosterPage.closePage( "qrc:/qml/ChatsPage.qml" )
            }
            pauseAnim: 700
        }
        ToolButton {
            id: toolBarButtonDialog
            icon: "qrc:/qml/images/bar_messages.png"
            anchors.left: parent.left
            anchors.leftMargin: (3.5*(parent.width/4) - 0.5*toolBarButtonDialog.width)
            onClicked: {
                if( main.chatJid != "" ) {
                    cppMyXmppClient.openChat( main.chatJid )
                    rosterPage.closePage( "qrc:/qml/MessagesPage.qml" )
                }
            }
            pauseAnim: 800
        }
    }
    /*********************************************************************/

    /******************************( Top Panel Connection )*******************************/
    TopPanel {
        id: topPanelStatConn
        pauseHide: 300
        property alias text: txtTopPanelConn.text
        property alias img: imgTopPanelConn.source
        Image {
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 40
            id: imgTopPanelConn
            height: 0.8*topPanelStatConn.height
            width: 0.8*topPanelStatConn.height
            smooth: true
        }
        Text {
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: imgTopPanelConn.right
            anchors.leftMargin: 20
            id: txtTopPanelConn
            color: "white"
            font.pixelSize: 0.6*topPanelStatConn.height
        }
    }
    /*********************************************************************/

    Rectangle {
        id: connectingRect
        z: 3
        anchors.top: parent.top
        anchors.bottom: toolBar.top
        anchors.left: parent.left
        anchors.right: parent.right
        color: "black"
        opacity: 0
        Behavior on opacity { NumberAnimation{ duration: 400 } }
    }
}
